<template>
  <div class="property-panel">
    <div v-if="nodeName" class="node-name">{{ nodeName }}</div>
    <component
      :is="getComponent"
      v-if="element"
      :element="element"
      :modeler="modeler"
      :users="users"
      :groups="groups"
      :postList="postList"
      :exps="exps"
      :categorys="categorys"
    />
  </div>
</template>

<script setup>
  import { ref, computed, watch, nextTick, onMounted, defineProps } from 'vue';
  import { NodeName } from './lang/zh';

  const props = defineProps({
    users: {
      type: Array,
      required: true,
    },
    groups: {
      type: Array,
      required: true,
    },
    postList: {
      type: Array,
      default: () => [],
    },
    categorys: {
      type: Array,
      required: true,
    },
    exps: {
      type: Array,
      default: () => [],
    },
    modeler: {
      type: Object,
      required: true,
    },
  });

  const element = ref(null);
  const getComponent = computed(() => {
    const type = element.value?.type;
    if (['bpmn:IntermediateThrowEvent', 'bpmn:StartEvent', 'bpmn:EndEvent'].includes(type)) {
      return 'startEndPanel';
    }
    if (
      [
        'bpmn:UserTask',
        'bpmn:Task',
        'bpmn:SendTask',
        'bpmn:ReceiveTask',
        'bpmn:ManualTask',
        'bpmn:BusinessRuleTask',
        'bpmn:ServiceTask',
        'bpmn:ScriptTask',
        // 'bpmn:CallActivity',
        // 'bpmn:SubProcess'
      ].includes(type)
    ) {
      return 'taskPanel';
    }
    if (type === 'bpmn:SequenceFlow') {
      return 'sequenceFlowPanel';
    }
    if (
      [
        'bpmn:InclusiveGateway',
        'bpmn:ExclusiveGateway',
        'bpmn:ParallelGateway',
        'bpmn:EventBasedGateway',
      ].includes(type)
    ) {
      return 'gatewayPanel';
    }
    if (type === 'bpmn:Process') {
      return 'processPanel';
    }
    return null;
  });
  const nodeName = computed(() => {
    if (element.value) {
      const bizObj = element.value.businessObject;
      const type = bizObj?.eventDefinitions ? bizObj.eventDefinitions[0].$type : bizObj.$type;
      return NodeName[type] || type;
    }
    return '';
  });

  onMounted(() => {
    handleModeler();
  });

  watch(getComponent, (v) => {
    console.log('getComponent', v);
  });

  function handleModeler() {
    props.modeler.on('root.added', (e) => {
      if (e.element.type === 'bpmn:Process') {
        element.value = null;
        nextTick().then(() => {
          element.value = e.element;
        });
      }
    });
    props.modeler.on('element.click', (e) => {
      const { element: _element } = e;
      if (
        _element.type === 'bpmn:Process' ||
        _element.type === 'bpmn:SequenceFlow' ||
        _element.type === 'bpmn:EndEvent'
      ) {
        element.value = _element;
      }
    });
    props.modeler.on('selection.changed', (e) => {
      // hack 同类型面板不刷新
      element.value = null;
      const _element = e.newSelection[0];
      if (_element) {
        nextTick().then(() => {
          element.value = _element;
        });
      }
    });
  }
</script>

<script>
  // eslint-disable-next-line
  import taskPanel from './components/nodePanel/task';
  // eslint-disable-next-line
  import startEndPanel from './components/nodePanel/startEnd';
  // eslint-disable-next-line
  import processPanel from './components/nodePanel/processPanel';
  // eslint-disable-next-line
  import sequenceFlowPanel from './components/nodePanel/sequenceFlow';
  // eslint-disable-next-line
  import gatewayPanel from './components/nodePanel/gateway';

  export default {
    components: {
      processPanel,
      startEndPanel,
      gatewayPanel,
      taskPanel,
      sequenceFlowPanel,
    },
  };
</script>

<style scoped lang="scss">
  .property-panel {
    padding: 20px;

    .node-name {
      margin-bottom: 10px;
      padding: 0 0 10px 20px;
      border-bottom: 1px solid #ccc;
      color: #444;
      font-size: 16px;
      font-weight: bold;
    }
  }
</style>
